import { Button, Form, Input, Select, Switch, Upload, message } from 'antd'
import { useTranslation } from 'react-i18next'
import { SaveButton } from '@/components/button'
import FormContainer from '@/components/container/FormContainer'
import { useForm } from '@/hooks/useForm'
import {
  PlatformType,
  ProjectType,
  PlatformTypeOptions,
  ProjectTypeOptions,
} from '@/constants/sourcemap'
import { UploadOutlined } from '@ant-design/icons'
import { createSourcemapApi, updateSourcemapApi } from '@/apis/sourcemap'
import type { RcFile } from 'antd/es/upload/interface'

export default function SourcemapForm() {
  const { t } = useTranslation()

  // 使用表单Hook
  const { title, formProps, isLoading, handleSubmit } = useForm({
    key: 'sourcemap',
    createApiFn: createSourcemapApi,
    updateApiFn: updateSourcemapApi,
    initialValues: {
      platformType: PlatformType.STANDARD,
      customerName: null,
      projectType: ProjectType.CONSOLE,
      version: null,
      file: null,
    },
    transformSubmitData: values => {
      const file = values.file?.fileList?.[0]?.originFileObj as RcFile
      if (!file) {
        message.error('请上传文件')
        return null
      }

      // 创建 FormData
      const formData = new FormData()
      formData.append('file', file)
      formData.append('platformType', values.platformType)
      values.customerName && formData.append('customerName', values.customerName)
      formData.append('projectType', values.projectType)
      formData.append('version', values.version)

      return formData
    },
  })

  // 定义表单验证规则
  const rules = {
    platformType: [{ required: true, message: '请选择平台类型' }],
    customerName: [{ required: true, message: '请输入客户名称' }],
    projectType: [{ required: true, message: '请选择项目类型' }],
    version: [{ required: true, message: '请输入版本' }],
    productVersion: [{ required: true, message: '请输入产品版本' }],
    file: [{ required: true, message: '请上传文件' }],
  }

  return (
    <FormContainer title={title}>
      <Form {...formProps}>
        <Form.Item label="平台类型" name="platformType" rules={rules.platformType}>
          <Select options={PlatformTypeOptions} placeholder="请选择平台类型" />
        </Form.Item>

        <Form.Item noStyle dependencies={['platformType']}>
          {({ getFieldValue }) => {
            const platformType = getFieldValue('platformType')
            return platformType === PlatformType.CUSTOM ? (
              <Form.Item label="客户名称" name="customerName" rules={rules.customerName}>
                <Input placeholder="请输入客户名称" />
              </Form.Item>
            ) : null
          }}
        </Form.Item>

        <Form.Item label="项目类型" name="projectType" rules={rules.projectType}>
          <Select options={ProjectTypeOptions} placeholder="请选择项目类型" />
        </Form.Item>

        <Form.Item label="版本" name="version" rules={rules.version}>
          <Input placeholder="请输入版本" />
        </Form.Item>

        <Form.Item label="上传文件" name="file" rules={rules.file}>
          <Upload
            beforeUpload={file => {
              const isZip = file.type === 'application/zip' || file.name.endsWith('.zip')
              if (!isZip) {
                message.error('只能上传 ZIP 格式的文件！')
                return false
              }
              return false
            }}
            maxCount={1}
            accept=".zip"
          >
            <Button icon={<UploadOutlined />}>上传文件</Button>
          </Upload>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 12, span: 8 }}>
          <SaveButton type="primary" loading={isLoading} onClick={handleSubmit} />
        </Form.Item>
      </Form>
    </FormContainer>
  )
}
